<script setup>
import { reactive, ref, onMounted } from 'vue'
import formatTime from '@/utils/formattime.js';
import axios from '../../utils/http.js'
const value = ref(Date.now() + 1000 * 60 * 60)
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()
let tableData = ref([])
let tableLoading = ref(true)
onMounted(() => {
    get_paper_list()
})
function get_paper_list() {
    axios({
        url: 'answer/answer/',
        method: 'GET',
        params: {
            username: localStorage.getItem('username')
        }
    }).then(res => {
        if (res.data.code == 201) {
            tableData.value = res.data.college
            for (let i = 0; i < tableData.value.length; i++) {
                tableData.value[i].start_time = formatTime(tableData.value[i].start_time)
                tableData.value[i].end_time = formatTime(tableData.value[i].end_time)
            }
        }
        tableLoading.value = false
    })
}
const begin_axam = (id) => {
    router.push({
        path: '/examination',
        query: {
            id: id
        }
    })

}
const open_messageBox = (row) => {
    if (!row.is_ok) {
        axios({
            url: 'answer/answer/',
            method: "put",
            data: {
                id: row.id
            }
        }).then(res => {
            if (res.data.code == 201) {
                ElMessageBox.alert(`是否参加${row.title}考试?`, '参加考试', {
                    confirmButtonText: 'OK',
                    callback: () => {
                        begin_axam(row.id)
                    },
                })
            }else{
                ElMessage({
                    type: 'warning',
                    message: res.data.msg,
                })
            }
        })

    } else {
        ElMessage({
            type: 'warning',
            message: '您已经参加过该考试',
        })
    }

}
</script>
<template>
    <el-table v-loading="tableLoading" :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="试卷标题" width="180" />
        <el-table-column prop="start_time" label="开始时间" width="150" />
        <el-table-column prop="end_time" label="结束时间" width="150" />
        <el-table-column label="是否参加过" width="100">
            <template #default="scope">
                <!-- <el-text type="success" v-if="scope.row.is_ok">已参加</el-text>
                <el-text type="primary" v-else">未参加</el-text> -->
                <el-text>{{ scope.row.is_ok ? '已参加' : '未参加' }}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
            <template #default="scope">
                <el-button :disabled="scope.row.is_ok" type="primary" bg text
                    @click="open_messageBox(scope.row)">参加考试</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<style scoped>
.el-col {
    text-align: center;
}
</style>